<template>
  <div class="flex js-ed align-center">
    <el-pagination
      background
      layout="prev, pager, next"
      v-model:current-page="state.current"
      :page-size="size"
      @current-change="change"
      small
      :total="total"
      class="is-ltr"
    ></el-pagination>
    <input
      type="text"
      v-model="state.page"
      class="page bd-borderBase"
      name
      id
    />
    <div
      class="textperson-t2 text-10 jump borderBase-bg text-center point"
      @click="jump"
    >
      {{ $t("global.jump") }}
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  props: {
    total: Number,
    current: Number,
    size: Number,
  },
  emits: ["currentchange"],
  setup(props, { emit }) {
    const state = reactive({
      current: props.current,
      page: props.current,
    });
    const change = (i) => {
      state.page = i;
      emit("currentchange", i - 1);
    };
    const jump = () => {
      if (state.page && state.page > 0) {
        if (Number(state.page) <= Math.ceil(props.total / props.size)) {
          state.current = Number(state.page);
          emit("currentchange", Number(state.page) - 1);
        }
      }
    };
    return {
      state,
      change,
      jump,
    };
  },
};
</script>

<style scoped lang="less">
.jump {
  padding: 3px 12px;
  // height: 26px;
  line-height: 20px;
  margin-inline-start: 10px;
}
.page {
  width: 20px;
  height: 20px;
}
</style>
